.music-container {
    position: relative;
    width: 100%;
    // height: 36px;
    margin-top: 18px;
    transition: background-color .3s;
    .play-schedule {
        position: absolute;
        // width: 100%;
        height: 100%;
        background: linear-gradient(to right top, #efbc6f, #f2af6d, #f3a26e, #f29671, #ef8a76);
        transition: all .2s;
    }
    .music-main {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 5px 0;
        .music-img {
            width: 36px;
            height: 36px;
            cursor: pointer;
            .el-img {
                height: 100%;
                width: 100%;
            }
        }
        .music-play, .music-footer {
            z-index: 10;
        }
        .icon-item-middle {
            margin: 0 8px;
        }
        .icon-item-playlist {
            margin-right: 8px;
        }
        .icon-item {
            transition: color .3s;
            cursor: pointer;
            i {
                font-size: 18px;
            }
        }
        .icon-item:hover {
            color: $button-red-color;
        }
    }
    .music-pop {
        position: absolute;
        width: 100%;
    }
    .music-list {
        top: -156px;
        opacity: 0;
        transform: scaleY(0);
        transform-origin: 0% 100%;
        transition: all .3s;
        font-size: 16px;
        height:156px;
        overflow-y:auto;
        ul {
            margin: 0;
            li {
                cursor: pointer;
                font-size: 16px;
                margin: 5px 0;
                padding:5px;
                transition: all .1s;
                @include border-radius(4px);
                user-select:none;
                span:nth-child(1) {
                    margin-right: 5px;
                    color: $button-red-color;
                    opacity: 0;
                }
                span:nth-child(2) {
                    letter-spacing: 1px;
                }
            }
            li:hover {
                color: $common-white-color;
                background-color: rgba(255,75,43,.8);
            }
        }
    }
    .music-name {
        opacity: 0;
        transform-origin:100% 0% ;
        transform: scaleY(0);
        transition: all .5s;
        span {
            font-size: 16px;
            margin: 4px;
        }
    }
    .play-list-active {
        opacity: 1;
        background-color: $common-white-color;
        transform: scaleY(1);
        transform-origin: 0% 100%;
    }
}
.volume-progress {
    i {
        cursor: pointer;
        @include border-radius(4px);
        transition: all .3s;
    }
    i:hover{
        color: $common-white-color;
        background-color: $button-red-color;
    }
    :deep(.el-progress--line) {
        width: 100%;
        margin: 0 5px;
    }
    :deep(.el-slider__bar) {
        background-color: $button-red-color !important;
    }
    :deep(.el-slider__button) {
        border-color: $button-red-color !important;
    }
}
.music-container:hover {
    background-color: $bg-overlay-color;
    .music-name{
        opacity: 1;
        background-color: $bg-overlay-color;
        transform-origin:100% 0% ;
        transform: scaleY(1);
    }
}